<template>
  <el-main>
    <div style="margin-right:780px">
      <el-input
        maxlength="12"
        prefix-icon="el-icon-search"
        v-model="input_number"
        placeholder="请输入工号"
        style="width:300px"
      ></el-input>
      <el-button type="primary" style="margin-left:20px" @click="getAllSalary()">查找</el-button>
    </div>
    <div style="margin-left:450px">
      <span class="away-from">工号：{{number}}</span>
      <span class="away-from">姓名：{{name}}</span>
    </div>
    <el-table :data="salaryList">
      <el-table-column prop="year" label="年" width="120" align="center"></el-table-column>
      <el-table-column prop="month" label="月" width="120" align="center"></el-table-column>
      <el-table-column prop="basicSalary" label="底薪" width="120" align="center"></el-table-column>
      <el-table-column prop="percentage" label="提成" width="120" align="center"></el-table-column>
      <el-table-column prop="subsidy" label="补助" width="220" align="center"></el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteSalary(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-main>
</template>

<script>
import { postRequestByParams } from "../utils/api";

export default {
  data() {
    return {
      salaryList: [],
      number: "",
      name: "",
      input_number: ""
    };
  },
  methods: {
    getAllSalary: function() {
      var _this = this;
      postRequestByParams("/employee/get-one-employee", {
        number: _this.input_number
      }).then(resp => {
        if (resp.status == 200) {
          var json = resp.data;
          _this.name = json.name;
        }
      });
      postRequestByParams("/salary/employee-salary", {
        number: _this.input_number
      }).then(resp => {
        if (resp.status == 200) {
          var json = resp.data;
          _this.salaryList = json;
          _this.number = _this.input_number;
          _this.input_number = "";
        }
      });
    },
    getAllSalaryAgain: function() {
      var _this = this;
      postRequestByParams("/salary/employee-salary", {
        number: _this.number
      }).then(resp => {
        if (resp.status == 200) {
          var json = resp.data;
          _this.salaryList = json;
        }
      });
    },
    deleteSalary: function(row) {
      var _this = this;
      this.$confirm("你将删除当月的工薪, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          postRequestByParams("/salary/delete-employee-salary", {
            number: _this.number,
            year: row.year,
            month: row.month
          }).then(resp => {
            if (resp.status == 200) {
              var json = resp.data;
              this.$alert(json.data);
            } else {
              this.$alert("未知错误！");
            }
            _this.getAllSalaryAgain();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
    
<style>
.away-from {
  margin-left: 70px;
  font-family: "Avenir";
  font-weight: bolder;
}
</style>